<!DOCTYPE html>
<html>
<head>
	<title>结果分析简易招聘</title>
	<script type="text/javascript" src="echarts.min.js"></script>
</head>

<body>
	<!-- 薪水 -->
	<div style="height: 600px; width: 800px" id="salary"></div>
	<br><br>
	<div style="height: 600px; width: 800px" id="cities"></div>

	<!-- js  -->

	<!-- 薪水 -->
	<script type="text/javascript">
		var salaryChart = echarts.init(document.getElementById('salary'));

		var raw	= {'10k-15K': 150, '15k-20K': 204, '5k-': 2, '20k-25K': 100, '5k-10K': 114, '30k+': 78, '25k-30K': 6}
		var name_ = ["5K-",'5k-10K', '10k-15K', '15k-20K', '20k-25K', '25k-30K', '30k+']
		
		function s_get_data(){
			var lst_value = []
			for (i in name_){
				lst_value.push(raw[name_[i]])

			}
			console.log(lst_value)
			return lst_value
		}
        var option = {
        			title: {
        				text: '薪水分布'
        			},
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : name_,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'职位数量',
				            type:'bar',
				            barWidth: '60%',
				            data: s_get_data()
				        }
				    ]
				};



        salaryChart.setOption(option);
	</script>

	<script type="text/javascript">
		var raw = {'杭州': 48, '北京': 37, '武汉': 19, '成都': 19, '上海': 104, '广州': 39, '其他城市': 30, '深圳': 64}

		function c_get_cites(r){
			lst_cities = []
			for (i in r){
				lst_cities.push(i)
			}
			return lst_cities
		}
		function c_get_data(r){
			lst_res = []
			for (i in r){
				lst_res.push({'name': i, 'value': r[i]})

			}
			return lst_res
		}

		var cityChart = echarts.init(document.getElementById('cities'));
		option = {
		    title : {
		        text: 'Python职位城市分布',
		        
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: c_get_cites(raw)
		    },
		    series : [
		        {
		            name: '城市',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:c_get_data(raw),
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		cityChart.setOption(option);
	</script>
</body>
</html>